<div class="main-container">
  <div class="search-wrap">
    <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
      <nz-form-item>
        <nz-form-label>选择日期</nz-form-label>
        <nz-form-control>
          <nz-range-picker formControlName="rangePickerTime" [nzAllowClear]="false" [nzPlaceHolder]="['起始日期', '截止日期']">
          </nz-range-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>查询
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>

  <div class="main-wrap">
    <div class="card-selection-container">
      <div class="unit">
        单位： 亿m³， m³/s
      </div>
      <div class="row first-row">
        <div class="custom-card" (click)="cardSelectionChanged('val13', 'totalVal13')">
          <p class="title">
            <span class="circle"></span>
            <span class="content">引黄灌区总引水量(实际)</span>
          </p>
          <div class="content-wrap">
            <div class="info-wrap">
              <p class="num yellow">{{totalData['val13']}}</p>
            </div>
          </div>
        </div>
        <div class="custom-card" (click)="cardSelectionChanged('val13', 'totalVal13')">
          <p class="title">
            <span class="circle"></span>
            <span class="content">引黄灌区总引水量(计划)</span>
          </p>
          <div class="content-wrap">
            <div class="info-wrap">
              <p class="num yellow">{{planTotalData['val13']}}</p>
            </div>
          </div>
        </div>
        <div class="custom-card" (click)="cardSelectionChanged('val13', 'totalVal13')">
          <p class="title">
            <span class="circle"></span>
            <span class="content">引黄灌区总引水量(去年同期)</span>
          </p>
          <div class="content-wrap">
            <div class="info-wrap">
              <p class="num yellow">{{oldTotalData['val13']}}</p>
            </div>
          </div>
        </div>
      </div>
      <nz-divider></nz-divider>
      <div class="row second-row">
        <div class="custom-card" *ngFor="let card of subCardList"
          (click)="cardSelectionChanged(card.id, card.totalId, card.name)"
          [class]="{'active-card': isCardActivated(card.id)}">
          <p class="title">
            <span class="circle"></span>
            <span class="content">{{card.name}}引水量</span>
          </p>
          <div class="content-wrap">
            <div class="info-wrap">
              <p class="num yellow">{{totalData[card.id]}}</p>
              <p class="info-name">实际</p>
            </div>
            <div class="info-wrap">
              <p class="num blue">{{planTotalData[card.id]}}</p>
              <p class="info-name">计划</p>
            </div>
            <div class="info-wrap">
              <p class="num blue">{{oldTotalData[card.id]}}</p>
              <p class="info-name">去年同期</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="charts-container">
      <div echarts [options]="basicLineOpts" [merge]="drainChartOpts" class="charts-cell"></div>
    </div>
    <nz-table #dataTable class="main-table" [nzData]="tableData" [nzWidthConfig]="widthConfig"
      [nzFrontPagination]="false" [nzLoading]="loading" nzBordered nzSize="middle">
      <thead>
        <tr class="custom-head">
          <th>日期</th>
          <th *ngFor="let head of tableHead">{{head.name}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>合计水量（万m³）</td>
          <td *ngFor="let val of waterTotalList">{{val}}</td>
        </tr>
        <tr class="even">
          <td>合计流量（m³/s）</td>
          <td *ngFor="let val of flowTotalList">{{val}}</td>
        </tr>
        <tr *ngFor="let data of dataTable.data;let idx = index" [class]="{'even':idx % 2 === 1}">
          <td>{{data.date}}</td>
          <td *ngFor="let prop of tableHead">{{data[prop.id]}}</td>
      </tbody>
    </nz-table>
  </div>
</div>
